/* 壹加壹农业平台 - 全局样式 */

/* ========== 颜色系统 ========== */
:root {
  /* 主色调 - 绿色系 */
  --color-primary: #10b981;
  --color-primary-dark: #059669;
  --color-primary-light: #34d399;
  
  /* 辅助色 */
  --color-secondary: #06b6d4;
  --color-accent: #f59e0b;
  --color-danger: #ef4444;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;
  
  /* 中性色 */
  --color-neutral: #f9fafb;
  --color-neutral-dark: #f3f4f6;
  --color-neutral-light: #ffffff;
  
  /* 文字颜色 */
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --text-white: #ffffff;
  
  /* 边框颜色 */
  --border-color: #e5e7eb;
  --border-color-dark: #d1d5db;
  
  /* 阴影 */
  --shadow-soft: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
  --shadow-medium: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  --shadow-large: 0 16rpx 48rpx rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 24rpx 64rpx rgba(0, 0, 0, 0.16);
}

/* ========== 通用样式类 ========== */

/* 卡片样式 */
.card-modern {
  background-color: #ffffff;
  border-radius: 24rpx;
  border: 2rpx solid #f3f4f6;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease;
}

.card-modern:active {
  box-shadow: var(--shadow-medium);
  border-color: rgba(16, 185, 129, 0.2);
}

/* 渐变背景 */
.gradient-primary {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.gradient-secondary {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.gradient-accent {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* 毛玻璃效果 */
.glass-effect {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10rpx);
}

/* 按钮样式 */
.btn-primary {
  padding: 24rpx 48rpx;
  border-radius: 24rpx;
  font-weight: 500;
  color: #ffffff;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: var(--shadow-medium);
  transition: all 0.3s ease;
}

.btn-primary:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-soft);
}

.btn-secondary {
  padding: 24rpx 48rpx;
  border-radius: 24rpx;
  font-weight: 500;
  color: var(--text-primary);
  background-color: #f9fafb;
  border: 2rpx solid #e5e7eb;
  transition: all 0.3s ease;
}

.btn-secondary:active {
  background-color: #f3f4f6;
}

/* ========== 布局辅助类 ========== */

/* 容器 */
.container-yjyny {
  max-width: 750rpx;
  margin: 0 auto;
  padding: 0 32rpx;
}

/* 间距 */
.mt-sm { margin-top: 16rpx; }
.mt-md { margin-top: 24rpx; }
.mt-lg { margin-top: 32rpx; }
.mt-xl { margin-top: 48rpx; }

.mb-sm { margin-bottom: 16rpx; }
.mb-md { margin-bottom: 24rpx; }
.mb-lg { margin-bottom: 32rpx; }
.mb-xl { margin-bottom: 48rpx; }

.px-sm { padding-left: 16rpx; padding-right: 16rpx; }
.px-md { padding-left: 24rpx; padding-right: 24rpx; }
.px-lg { padding-left: 32rpx; padding-right: 32rpx; }

.py-sm { padding-top: 16rpx; padding-bottom: 16rpx; }
.py-md { padding-top: 24rpx; padding-bottom: 24rpx; }
.py-lg { padding-top: 32rpx; padding-bottom: 32rpx; }

/* ========== 动画效果 ========== */

/* 淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 上滑淡入动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(60rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 缩放淡入动画 */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 涟漪效果 */
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* 动画类 */
.fade-in {
  animation: fadeIn 0.6s ease-out;
}

.fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

.scale-in {
  animation: scaleIn 0.4s ease-out;
}

.animate-delay-1 {
  animation-delay: 0.1s;
}

.animate-delay-2 {
  animation-delay: 0.2s;
}

.animate-delay-3 {
  animation-delay: 0.3s;
}

/* ========== 文本样式 ========== */

.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

.text-white {
  color: var(--text-white);
}

.text-green {
  color: var(--color-primary);
}

.text-bold {
  font-weight: bold;
}

.text-medium {
  font-weight: 500;
}

/* ========== 隐藏滚动条 ========== */

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ========== 圆角 ========== */

.rounded-sm { border-radius: 12rpx; }
.rounded-md { border-radius: 16rpx; }
.rounded-lg { border-radius: 24rpx; }
.rounded-xl { border-radius: 32rpx; }
.rounded-full { border-radius: 999rpx; }

/* ========== Flex布局 ========== */

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ========== 特殊效果 ========== */

/* 标签徽章 */
.badge {
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 22rpx;
  font-weight: 500;
}

.badge-primary {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--color-primary);
}

.badge-secondary {
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.badge-accent {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--color-accent);
}

.badge-danger {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

/* 分割线 */
.divider {
  height: 2rpx;
  background-color: var(--border-color);
  margin: 32rpx 0;
}

/* 底部安全区域 */
.safe-area-bottom {
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
}


